import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
import "./index.less";
const Charts = props => {
	// 使用useRef钩子来存储图表容器的DOM元素引用。
	let box = useRef();
	let myChart = null;
	// 在组件挂载后和props.option变化时执行的副作用函数。
	useEffect(() => {
		console.log(box.current);
		// 初始化Echarts实例。
		myChart = echarts.init(box.current);
		// 根据props.option的存在与否，设置图表的配置选项。
		if (props.option != null) {
			myChart.setOption(props.option);
		} else {
			console.log("没有传过来");
		}
		return () => {
			// 在组件卸载时销毁Echarts实例。
			myChart.dispose();
		};
	}, [props.option]); // 仅当props.option变化时，重新执行副作用函数。

	useEffect(() => {
		window.addEventListener("resize", () => {
			myChart.resize();
		});
		return () => {
			// 在组件卸载时销毁Echarts实例。
			window.removeEventListener("resize", () => {});
		};
	}, []);
	// 返回图表的容器元素。
	return <div ref={box} className="chart"></div>;
};
export default Charts;
